<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>优选购物商城登录界面</title>
<link rel="stylesheet" href="/static/layui-v2.5.6/layui/css/layui.css">
<link rel="stylesheet" href="/static/store/css/app.css">
<style type="text/css">
		@keyframes fade-in {
	    0% { opacity: 0; }

	    /*初始状态 透明度为0*/
	    40% { opacity: 0; }

	    /*过渡状态 透明度为0*/
	    100% { opacity: 1; }98aaa
	}
	    
	#app-wrapper { 
		animation: fade-in;/*动画名称*/ 
	    animation-duration: .6s;/*动画持续时间*/
	}

	.app-page-login:before {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		content:'';
		background: pink;
		/* background: url(../img/login_bg.jpg) center center/cover no-repeat !important; */
	}

	.app-login-body {
		vertical-align: middle;
		width: 400px;
		margin: 175px 400px;
		background: #fff;
		border-radius: 4px;
		padding: 50px 40px 40px;
	}

	.app-brand-text { 
		margin-left: 100px; 
		margin-bottom: 50px; 
		}
</style>
</head>
<body class="app-page-login">
	<div id="app-wrapper" class="app-login-body">
		<h2 class="app-brand-text">优选商城系统</h2>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-block">
					<input type="text" name="User[name]" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="User[password]" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="login">登录</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>
<script src="/static/layui-v2.5.6/layui/layui.js"></script>
//要用到jquery的ajax方法，该文件需要下载
<!-- <script src="/static/store/js/jquery.min.js"></script> -->
<script>
		//JavaScript代码区域
		layui.use('form', function() {
			var form = layui.form;
			//监听提交
			form.on('submit(login)', function(data) {
				$.ajax({
					url : "login",
					type : "post",
					data : data.field,//表单字段
					success : function(result) {
                      //账号合法
						if (result.code === 1) {
							layer.msg(result.msg, {
								time : 1500,
								anim : 1
							}, function() {
								window.location = result.url;
							});
						} else {//账号或密码不正确
							layer.msg(result.msg, {
								time : 1500,
								anim : 6
							});
						}
					}
				});
				return false;
			});

		});
	</script>